<template>
	<view>
		<!-- f1:面包屑导航 -->
		<XzBreadcrumb separator=">" :path="pathList"></XzBreadcrumb>
		<!-- f2:轮播图 -->
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500">
			<swiper-item v-for="(p,i) in product.picList" :key="i">
				<image :src="$base+p.md" mode="widthFix"></image>
			</swiper-item>
		</swiper>
		<!-- f3:商品详情和添加购物车购买 -->
		<view class="f3">
			<text class="title">{{product.title}}</text>
			<text class="subtitle">{{product.subtitle}}</text>
			<view class="price-container">
				<text class="price">￥{{product.price}}</text>
				<text>服务承诺:{{product.promise}}</text>
			</view>
			<view class="buy-count">
				<text>客服: 联系客服</text>
				<view class="spec">
					<text>规格:</text>
					<view>
						<navigator class="link" :class="{active:f.lid==product.lid}" v-for="(f,i) in family.laptopList"
							:url="`/pages/details/details?lid=${f.lid}`" :key="i">{{f.spec}}</navigator>
					</view>
				</view>
				<view class="number-box">
					<text>数量:</text>
					<uni-number-box @change=""></uni-number-box>
				</view>
				<view class="btn">
					<button size="mini">立即购买</button>
					<button type="primary" size="mini">添加到购物车</button>
					<button type="primary" size="mini">收藏</button>
				</view>
			</view>
		</view>

		<!-- f4:为您推荐 -->
		<view class="f4">
			<uni-card title="为您推荐" isFull>
				<scroll-view class="scroll-view" scroll-x>
					<view class="container">
						<view class="view" v-for="(s,i) in suggestList" :key="i">
							<image :src="$base + s.pic" mode="widthFix"></image>
							<text>{{s.title}}</text>
						</view>
					</view>
				</scroll-view>
			</uni-card>
		</view>
	
		<!-- f5:商品详情 -->
		<uni-card title="商品详情">
			<rich-text :nodes="product.details"></rich-text>
		</uni-card>
	</view>
</template>

<script>
	import {productDetails,base} from '../../service'
	export default {
		data() {
			return {
				$base:base,
				family: {}, //查询商品所在家族
				product: {}, //查询的商品信息
				pathList: [{
						pid: 10,
						name: '首页',
						href: '/pages/index/index',
						openType: 'switchTab'
					},
					{
						pid: 20,
						name: '商品列表',
						href: '/pages/list/list',
						openType: 'navigate'
					},
					{
						pid: 30,
						name: '商品详情',
						href: '/pages/details/details',
						openType: 'redirect'
					},
				],
				suggestList: [{
						sid: 10,
						title: '戴尔燃7000',
						pic: 'img/product_detail/product_detail_2.png'
					},
					{
						sid: 10,
						title: 'ThinkPad',
						pic: 'img/product_detail/product_detail_1.png'
					},
					{
						sid: 10,
						title: '联想YOGA900',
						pic: 'img/product_detail/product_detail_4.png'
					},
					{
						sid: 10,
						title: '戴尔魔方15MF',
						pic: 'img/product_detail/product_detail_3.png'
					},
				]
			}
		},
		async onLoad({lid}) {
			let {family,product} = await productDetails(lid)
			console.log(family, product);
			this.family = family
			this.product = product
			//数据预处理
			this.product.details = this.product.details.replace(/src="img/g,`src="${this.$base}img`)	
			this.product.details = this.product.details.replace(/<img/g,`<img style="width:100%;"`)
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.swiper {
		margin-top: $uni-spacing-col-base;
		height: 750rpx;
		text-align: center;

		image {
			width: 750rpx;
		}
	}

	.f3 {
		padding: $uni-spacing-col-sm $uni-spacing-row-sm;
		display: flex;
		flex-direction: column;

		.title {
			background-color: #fff;
			padding: $uni-spacing-col-base $uni-spacing-row-base;
		}

		.subtitle {
			color: $uni-text-color-grey;
			background-color: #fff;
			padding: $uni-spacing-col-base $uni-spacing-row-base;
		}

		.price-container {
			display: flex;
			flex-direction: column;

			.price {
				padding: $uni-spacing-col-sm $uni-spacing-row-base;
			}

			text:nth-child(2) {
				padding: 0 $uni-spacing-row-base $uni-spacing-row-base;
			}
		}

		.buy-count {
			background-color: #fff;
			padding: $uni-spacing-col-base $uni-spacing-row-base;

			.spec {
				display: flex;

				text {
					margin-right: $uni-spacing-row-sm;
				}

				.link {
					border: $uni-border-width $uni-border-style $uni-border-color;
					border-radius: $uni-border-radius-base;
					margin: $uni-spacing-col-base 0;

					&.active {
						border-color: $uni-color-primary;
						color: $uni-color-primary;
					}
				}
			}

			.number-box {
				display: flex;
				align-items: center;
				padding: $uni-spacing-col-lg $uni-spacing-row-base;

				text {
					margin-right: $uni-spacing-row-sm;
				}
			}

			.btn {
				display: flex;
				justify-content: space-around;
				margin-bottom: $uni-spacing-col-base;
			}
		}
	}

	.f4 {
		.container {
			width: 260*4rpx;
			display: flex;

			.view {
				width: 260rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					width: 80%;
				}
			}
		}


	}
</style>
